Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！
どうも！大阪オフィスの西村祐二です。
ちょっと日にちが過ぎましたが、5/29にAngular v8がリリースされました！
今回はそのアップデート内容をまとめてみます。
主に下記のサイトをもとにまとめていますので、詳細がきになる方はリンク先をご確認ください。
https://blog.ninja-squad.com/2019/05/29/what-is-new-angular-8.0/
Angularのバージョンアップサイクル
「もう、バージョン8！？」
って思った方いるかと思いますが、Angularのバージョンアップサイクルは約6ヶ月ごとのメジャーリリースを行うサイクルとなっております。
ちなみにバージョン7がリリースされましたのは2018年10月19日でした。
バージョン9は2019年10,11月頃の予定となっています。
サポート期間がいつまでなのか、次にどんな機能が載ってくるのかある程度予想できるので、プロダクトのバージョンアップスケジュールなど立てやすいかと思います。
詳細は下記を参照ください。
https://angular.io/guide/releases
バージョンを上げるには
Angularのドキュメントにバージョンを上げるためにどのようなステップを踏めばよいか教えてくれるサポートページがありますので、こちらより今のバージョンを選択して、アップデート手順を確認してください。
変更点
新レンダリングエンジン「Ivy」がオプトイン機能として搭載されました！
今回のバージョンの目玉機能はこれかと思います。
Ivyは何かというと新しく開発された高速なレンダリングエンジンで高速化やバンドルサイズの削減などが期待されます。
プレビュー版ですが、Ivyコンパイラがオプトイン機能として搭載されました！（v9で安定版としてリリースされるみたいです）
使い方としては、新規プロジェクトを作成する際にオプションをつけることで、Ivyを有効にできます。
$ ng new shiny-ivy-app --enable-ivy
既存プロジェクトでも、設定ファイルに追記するだけで、Ivyに切り替えることができます。
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}
https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/
Differential Loadingが利用可能になりました！
こちらも目玉機能のひとつです！
これは最新のビルドとレガシービルドを実行し、アプリケーションを読み込む際に必要なバンドルだけが自動的に読み込まれバンドルサイズが削減されるという機能になります。
これにより、バンドルサイズが7-20%削減されるようです。
ちなみに、ng updateでバージョンアップすると、自動的にtsconfig.jsonのtargetを更新してくれます。
詳細は下記を参照ください。
https://angular.io/guide/deployment#differential-loading
Routerの設定にDynamic Importを使用できるようになりました
あるパスにルーティングしたときモジュールをLazyLoadする際に下記のような書き方をしていましたが、
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
Dynamic Importの形で設定できるようになりました。これによって、VSCodeやWebStormなどのエディタでモジュールを認識できるようになるようです。
{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}
ちなみに、ng updateを使ってアップデートした場合は、新しいベストプラクティスを使用するようにコードが自動的に更新されます。便利！
試験的にBazelでビルドする機能が搭載されました！
この機能はAngular Labs（実験的なプロジェクト）の一部ですのでご注意ください。
Bazelを使うことによって、アプリケーションのビルドを高速化できるメリットがあります。
詳細は下記を参照ください。
https://angular.io/guide/bazel
Angular CLIの情報をGoogleに提供する機能が追加されました
Angular には強力なCLIが提供されています。
そのCLIのデータをGoogleに提供する機能が追加されました。
CLIのデータ収集はデフォルトでは無効になっており、個々のユーザーがプロジェクトレベルで有効にする必要があります。
リリース直後は下記のようにインストールするときに情報提供するかきかれる、という報告があったのですが、デフォルト無効化として修正されてみたいです。
$ npm install @angular/cli
集めたデータはAngularチームと共有され、CLIを改善するために使用されます。
詳細は下記を参照ください。
https://angular.io/cli/usage-analytics-gathering
@ViewChild/@ComponentChild 第二引数が必須となりました
今まで、オプションとなっていたのが、必須なパラメータとなりました。
@xxChildは、ngOnInitで有効になり場合と、ngAfterViewInit/ngAfterContentIntで有効になる場合があり、その制御を明示的に指定することが必要となりました。
こちらも、ng updateでバージョンアップすると自動的に追記してくれます。最強
Angular CLIでWeb Workerを作成し、既存プロジェクトに追加できるようになりました
Web Workerを使用すると、画像やビデオの操作などの作業をバックグラウンドスレッドに任せることができます。
下記コマンドで、プロジェクトにWeb Workerを追加できるようになりました。
$ ng generate webWorker my-worker
詳細は下記を参照ください。
https://angular.io/guide/web-worker
AngularJSからの移行がやりやすく改善されました
AngularJSアプリケーションで$locationサービスを使用している場合、LocationUpgradeModuleを利用して、できるだけ多くの責任をAngularに移行できるようになりました。
詳細は下記リンクを参照ください。
https://angular.io/guide/upgrade#using-the-unified-angular-location-service
また、AngularJSアプリケーションの一部をAngularから遅延ロードすることに関するベストプラクティスがドキュメント化されました。
ドキュメントはこちら
https://v8.angular.io/guide/upgrade#create-a-service-to-lazy-load-angularjs
platform-webworkerが非推奨APIになりました
platform-webworkerはWebアプリケーション全体をWebワーカーで実行する機能として実験的にAngular v2で導入されました。
非推奨となった理由としては、全体ではなく、メモリ内検索や画像処理など重要度の低い作業をオフロードするというユースケースにフォーカスする方針となったためとのことです。
詳細は下記リンクを参照ください。
https://angular.io/guide/deprecations#webworker-apps
@angular/httpが削除されました
以前からアナウンスされていた、@angular/httpが削除されました。
これからは、@angular/common/httpを利用しましょう。
詳細は下記を参照ください。
https://angular.io/guide/deprecations#removed-apis
さいごに
Angular v8のアップデート内容をまとめてみました。
内部的なアップデートがメインだったので、分かりづらいかもしれませんが、確実に進化している内容のアップデートだと感じました。
v9ではIvy,Bazelの安定版リリースが予定されているので、今後のアップデートも楽しみです！
v8に関する話は下記の勉強会でも話がありました。Angularの今後の動向など含めて、さらに知りたい場合はこちらもご参考ください。
【レポート】 ng-kyoto、ng-japan meetup 2019 Spring合同開催！Angular好きが集まる勉強会に参加してきました！ #ng_jp #ng_kyoto
![[Auth0] Auth0+React アプリケーションでクイックスタートやってみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-e37cf03c5caac969de0f633e4738977d/1862834d1806cb03b64a8000a5a1a39e/Auth0ByOkta.jpg)
